<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=0.5,minimum-scale=0.5,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>我的活动</title>
    <link rel="stylesheet" type="text/css" href="__CSS__api.css" />
    <link rel="stylesheet" type="text/css" href="__CSS__aui.css" />
    <link rel="stylesheet" type="text/css" href="__CSS__dropload.css" />
    <link rel="stylesheet" type="text/css" href="__CSS__common.css" />


    <style>


        .aui-bar-nav .aui-iconfont {
            position: relative;
            font-family: "aui_iconfont" !important;
            font-size: 1.5rem;
            color: #E73C5C;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            height: 4.8rem;
        }

        .aui-bar-nav {
            background-color: #fff;
        }

        .aui-icon-tu {
            height: 4.8rem;
            width: 98px;
            background: url('__IMG__left.png') no-repeat 1rem center;
            background-size: 44px 44px;
        }

        .aui-bar-nav .aui-title {
            font-size: 34px;
            color: #333333;
            font-weight: 500;
        }

        .aui-icon-rightu {
            height: 4.8rem;
            width: 98px;
            background-size: 44px 44px;
            font-size: 1.5rem;
        }




        .out_content {
            box-sizing: border-box;
            width: 100%;
            height: 17.2rem;
            border-bottom: 1px solid #DEDEDE;
        }

        .title {
            width: 100%;
            height:5.6rem;
            line-height: 5.6rem;
            font-size: 1.6rem;
            color: #333333;
        }

        .activity {
            padding: 28px 28px 0 28px;
            background: #fff;
        }

        .activityImg {
            width: 9.65rem;
            height:9.65rem;
            border-radius: 12px;
            margin-right: 32px;
        }

        .showImg {
            width: 100%;
            height: 100%;
        }

        .activityContent {
            height:9.65rem;
            position: relative;
        }

        .activityTitle {
            color: #333;
            font-size: 32px;
            margin-bottom: 1rem;
        }

        .box {
            margin-bottom: 10px;

            line-height: 26px;
            display: flex;
            align-items: center;
            margin-bottom: 0.6rem;
        }

        .destination,
        .activityTime {
            color: #999;
            font-size: 26px;
        }

        .logo1 {
            width: 26px;
            height: 26px;
            background: url(__IMG__location.png) no-repeat center center;
            background-size: 26px 26px;
            margin-right: 8px;
        }

        .logo2 {
            width: 26px;
            height: 26px;
            background: url(__IMG__clock.png) no-repeat center center;
            background-size: 26px 26px;
            margin-right: 8px;
        }

        .report {

            width: 100%;
            position: absolute;
            bottom: -5px;
        }

        .signUp {
            text-align: right;
            font-size: 26px;
            color: #FFBA71;
            padding-top: 30px;
        }

        .signUp1 {
            text-align: right;
            font-size: 26px;
            color: #24A8FC;
            padding-top: 40px;
        }

        .signUp2 {
            text-align: right;
            font-size: 26px;
            color: #999;
            padding-top: 40px;
        }

        .xian {
            width: 30px;
            height: 30px;
            display: inline-block;
            vertical-align: middle;
        }

        .moreActivity {
            width: 100%;
            height: 108px;
            line-height: 108px;
            color: #999;
            font-size: 28px;
            text-align: center;
        }

        .juli {
            margin-bottom: 20px;
        }

        .activityDetails {
            padding: 30px 0 30px 0;
        }

        .jiangzuo {
            margin-top: 20px;
            width: 125px;
            height: 50px;
            text-align: center;
            border-radius: 10px;
            color: #E73C5C;
            font-size: 24px;
            padding: 4px 7px;
            display: inline-block;
            border: 1px solid #E73C5C;
            font-weight: normal;

        }



        .foott {
            font-size: 30px;
            color: #ccc;
            line-height: 30px;
            margin: 46px auto;
            text-align: center;
        }

        .over {
            color: #B3B3B3;
        }

        .jiangzuo1 {
            background-color: #E73C5C;
            color: #FFFFFF;
        }



        .destination {
            line-height: 1.1rem;
        }

        .activityTitle {
            line-height: 1.5rem;
        }

    </style>
</head>

<body>
<div class="l_box"  id="loading2"><img src="__IMG__loading.gif" alt="" id="loading"></div>

<header class="aui-bar aui-bar-nav underLine" style="padding-top:25px;z-index:10000;" id="header">
    <a class="aui-pull-left" tapmode="active" onclick="history.go(-1)"> <span class="aui-iconfont aui-icon-tu"> </span> </a>
    <div class="aui-title" style="margin-top:1.2rem;">我的活动</div>
    <a class="aui-pull-right">
    </a>
</header>
<!--<div class="kong" style="margin-top:5.8rem" id="kong">-->
    <!--<img src="__IMG__quesheng/no_collect.png" class="">-->
    <!--<div class="seatName1">暂无活动</div>-->
<!--</div>-->
<div class="name">

    <div class="upOrDown">
        <div class="upOrDown_data" style="padding:0 1.5rem 1.5rem 1.5rem;background-color: #FFFFFF;margin-top: 1rem;margin-bottom: 1rem;">
            <!--<div class="out_content underLine">-->
                <!--<div class="title">南丁格尔志愿者中心</div>-->
                <!--<div class="content flex-wrap">-->
                    <!--<div class="activityImg"><img src="__IMG__jingtaitu/jigoufengcai.png" class="showImg"></div>-->
                    <!--<div class="activityContent flex-con">-->
                        <!--<div class="activityTitle aui-ellipsis-1">周六一起去给起去给起去给敬老院送给起去给敬老院送爱心</div>-->
                        <!--<div class="box">-->
                            <!--<div class="logo1"></div>-->
                            <!--<div class="destination aui-ellipsis-1">朝阳去元臣国起去给起去给际酒店1908会议...</div>-->
                        <!--</div>-->
                        <!--<div class="box">-->
                            <!--<div class="logo2"></div>-->
                            <!--<div class="activityTime">08-21&nbsp;&nbsp;&nbsp;20:00至23:00</div>-->
                        <!--</div>-->
                        <!--<div class="report flex-wrap">-->
                            <!--<div class="signUp">-->
                                <!--<img src="__IMG__xian.png" alt="" class="xian">报名中-->
                            <!--</div>-->
                            <!--<div class="flex-con"></div>-->
                            <!--<div class="jiangzuo">取消报名</div>-->
                        <!--</div>-->
                    <!--</div>-->
                <!--</div>-->
            <!--</div>-->

            <!--<div class="out_content underLine">-->
                <!--<div class="title">南丁格尔志愿者中心</div>-->
                <!--<div class="content flex-wrap">-->
                    <!--<div class="activityImg"><img src="__IMG__jingtaitu/jigoufengcai.png" class="showImg"></div>-->
                    <!--<div class="activityContent flex-con">-->
                        <!--<div class="activityTitle aui-ellipsis-1">周六一起去给敬老院送爱心...</div>-->
                        <!--<div class="box">-->
                            <!--<div class="logo1"></div>-->
                            <!--<div class="destination aui-ellipsis-1">朝阳去元臣国际酒店1908会议...</div>-->
                        <!--</div>-->
                        <!--<div class="box">-->
                            <!--<div class="logo2"></div>-->
                            <!--<div class="activityTime">08-21&nbsp;&nbsp;&nbsp;20:00至23:00</div>-->
                        <!--</div>-->
                        <!--<div class="report flex-wrap">-->
                            <!--<div class="signUp">-->
                                <!--<img src="__IMG__xian.png" alt="" class="xian">报名中-->
                            <!--</div>-->
                            <!--<div class="flex-con"></div>-->
                            <!--<div class="jiangzuo jiangzuo1">立即签到</div>-->
                        <!--</div>-->
                    <!--</div>-->
                <!--</div>-->
            <!--</div>-->

            <!--<div class="out_content underLine">-->
                <!--<div class="title">南丁格尔志愿者中心</div>-->
                <!--<div class="content flex-wrap">-->
                    <!--<div class="activityImg"><img src="__IMG__jingtaitu/jigoufengcai.png" class="showImg"></div>-->
                    <!--<div class="activityContent flex-con">-->
                        <!--<div class="activityTitle aui-ellipsis-1">周六一起去给敬老院送爱心...</div>-->
                        <!--<div class="box">-->
                            <!--<div class="logo1"></div>-->
                            <!--<div class="destination aui-ellipsis-1">朝阳去元臣国际酒店1908会议...</div>-->
                        <!--</div>-->
                        <!--<div class="box">-->
                            <!--<div class="logo2"></div>-->
                            <!--<div class="activityTime">08-21&nbsp;&nbsp;&nbsp;20:00至23:00</div>-->
                        <!--</div>-->
                        <!--<div class="report flex-wrap">-->
                            <!--<div class="signUp over">-->
                                <!--已结束-->
                            <!--</div>-->
                            <!--<div class="flex-con"></div>-->
                            <!--<div class="jiangzuo" onclick="shanchu();">删除活动</div>-->
                        <!--</div>-->
                    <!--</div>-->
                <!--</div>-->
            <!--</div>-->
        </div>
    </div>
</div>

<div class="toast-wrap">
    <span class="toast-msg"></span>
</div>
</body>
<script type="text/javascript" src="__JS__jquery.min.js"></script>
<script type="text/javascript" src="__JS__layer_mobile/layer.js"></script>
<script type="text/javascript" src="__JS__dropload.min.js"></script>
<script type="text/javascript" src="__JS__api.js"></script>
<script type="text/javascript" src="__JS__tt.js"></script>
<script type="text/javascript" src="__JS__common.js"></script>

<script>
    var page = 0;
    /**
     * 上拉加载，下拉刷新
     */
    var dropload = $('.upOrDown').dropload({
        scrollArea : window,
        autoLoad : true,
//        domUp : {
//            domClass   : 'dropload-up',
//            domRefresh : '<div class="dropload-refresh">↓下拉刷新-自定义内容</div>',
//            domUpdate  : '<div class="dropload-update">↑释放更新-自定义内容</div>',
//            domLoad    : '<div class="dropload-load"><span class="loading"></span>加载中-自定义内容...</div>'
//        },
//        domDown : {
//            domClass   : 'dropload-down',
//            domRefresh : '<div class="dropload-refresh">刷新</div>',
//            domLoad    : '<div class="dropload-load"><span class="loading"></span>加载中...</div>',
//            domNoData  : '<div class="dropload-noData">无数据</div>'
//        },
        loadDownFn : function(me){
            page++;
            $.ajax({
                url:'{:url("my/myactivites")}',
                data:'page='+page,//
                type:'POST',
                dataType:'JSON',
                success: function(data){
                    var arrLen = data.msg.length;
                    if(arrLen<=0){
                        me.lock();
//                         无数据
                        me.noData(true);
                        // 每次数据加载完，必须重置
                        me.resetload();
                    }else{
                        var datas = data.msg;
                        getlist_xiala(datas);

                        // 每次数据加载完，必须重置
                        me.resetload();
                    }


                },
                error: function(xhr, type){
                    // 即使加载出错，也得重置
                    me.resetload();
                }
            });
        },
        loadUpFn : function(me){
            // var keyword = $('input[name="cate_id"]').val();

            page = 1;
            $.ajax({
                url:'{:url("my/myactivites")}',
                data:'page='+page,
                type:'POST',
                dataType:'json',
                success: function(data){
                    $('.upOrDown_data').empty();//
                    var datas = data.msg;
                    getlist_xiala(datas);
                    // $.each(datas,function(key,v){
                    //     var _html='';
                    //     _html +='<div class="cooc underLine" onclick="detail(this)" idd="'+v.information_id+'">';
                    //     _html +='<div class="header">';
                    //     _html +='<img src="'+v.information_img+'" alt=""></div>';
                    //     _html +='<div class="right" style="margin-left:0.8rem">';
                    //     _html +='<div class="title aui-ellipsis-1" >'+v.information_title+' </div>';
                    //     _html +='<div class="cont aui-ellipsis-1" style="">'+v.information_introduce+'</div>';
                    //     _html +='<div class="timefrom">';
                    //     _html +='<div class="from">'+v.mechanism_for+'</div>';
                    //     _html +='<div class="time">'+v.information_release_time+'</div> </div> </div></div>';
                    //     $(".upOrDown_data").append(_html);
                    // });
                    me.resetload();
                    me.unlock();
                    me.noData(false);
                },
                error: function(xhr, type){
                    me.resetload();
                }
            });
        }
    });
    //   将数据塞进列表
    // <div class="out_content underLine">
    //     <div class="title">南丁格尔志愿者中心</div>
    //     <div class="content flex-wrap">
    //     <div class="activityImg"><img src="__IMG__jingtaitu/jigoufengcai.png" class="showImg"></div>
    //     <div class="activityContent flex-con">
    //     <div class="activityTitle aui-ellipsis-1">周六一起去给敬老院送爱心...</div>
    //     <div class="box">
    //     <div class="logo1"></div>
    //     <div class="destination aui-ellipsis-1">朝阳去元臣国际酒店1908会议...</div>
    //     </div>
    //     <div class="box">
    //     <div class="logo2"></div>
    //     <div class="activityTime">08-21&nbsp;&nbsp;&nbsp;20:00至23:00</div>
    // </div>
    // <div class="report flex-wrap">
    //     <div class="signUp">
    //     <img src="__IMG__xian.png" alt="" class="xian">报名中
    //     </div>
    //     <div class="flex-con"></div>
    //     <div class="jiangzuo jiangzuo1">立即签到</div>
    //     </div>
    //     </div>
    //     </div>
    //     </div>
    function  getlist_xiala(data){
        var html='';
        for (var i=0;i<data.length;i++) {
            html+='<div class="out_content underLine" onclick="opendetail('+data[i].id+');">';
            html+='<div class="title">'+data[i].mechanism_name+'</div>';
            html+='<div class="content flex-wrap">';
            if (data[i].activity_img==''||data[i].activity_img==null) {
                html+='<div class="activityImg"><img src="__IMG__zhanweitu/active_list.png" class="showImg"></div>';

            }else {
                html+='<div class="activityImg"><img src="'+data[i].activity_img+'" class="showImg"></div>';

            }
            html+='<div class="activityContent flex-con">';
            html+='<div class="activityTitle aui-ellipsis-1">'+data[i].activity_name+'</div>';
            html+='<div class="box">';
            html+='<div class="logo1"></div>';
            html+='<div class="destination aui-ellipsis-1">'+data[i].activity_address+'</div>';
            html+='</div>';
            html+='<div class="box">';
            html+='<div class="logo2"></div>';
            html+='<div class="activityTime">'+data[i].activity_start_time+'至'+data[i].activity_end_time+'</div>';
            html+='</div>';
            html+='<div class="report flex-wrap">';

            if (data[i].activity_status==2){
                html+='<div class="signUp">';
                html+='<img src="__IMG__xian.png" alt="" class="xian">报名中';
                html+='</div>';
                html+='<div class="flex-con"></div>';
                if (data[i].sign_status=='1'){
                    html+='<div class="jiangzuo"  onclick="quxiao('+data[i].id+',event)">取消报名</div>';
                }
            }else if (data[i].activity_status==3) {
                html+='<div class="signUp">';
                html+='<img src="__IMG__xian.png" alt="" class="xian">进行中';
                html+='</div>';
                html+='<div class="flex-con"></div>';
                if (data[i].sign_status=='2'){
                    html+='<div class="jiangzuo jiangzuo1" onclick="qiandao('+data[i].id+',event)">立即签到</div>';
                }
            }else if (data[i].activity_status==4) {
                html+='<div class="signUp over">';
                html+='已结束';
                html+='</div>';
                html+='<div class="flex-con"></div>';
                html+='<div class="jiangzuo" tapmode onclick="shanchu('+data[i].id+',event)" data-id='+data[i].id+'>删除活动</div>';

            }else {
            }
            html+='</div></div></div></div>';

        }
        $(".upOrDown_data").append(html);
    }
// 打开详情
    function opendetail(id) {
        location.href = '{:url("First/activitydatail")}?activity_id='+id;

    }
    // 打开签到
    function qiandao(id,event) {
        event.stopPropagation();
        location.href = '{:url("First/sign")}?id='+id;


    }
    // 删除
    function shanchu(id,event) {
        event.stopPropagation();
        loaddingOpen();
        $.ajax({
            url:'{:url("my/deletemyActivies")}',
            data:'id='+id,
            type:'POST',
            dataType:'JSON',
            success: function(data){
                loaddingClose();

                if (data.status=='200') {
                    toast('删除成功');
                    window.location.reload();
                }else {

                    toast(data.msg);
                }



            },
            error: function(xhr, type){
                loaddingClose();
                toast('无网络或连接超时，请重试');

            }
        });

    }
    // 取消
    function quxiao(id,event) {
        event.stopPropagation();
        loaddingOpen();
        $.ajax({
            url:'{:url("my/cancelSign")}',
            data:'id='+id,
            type:'POST',
            dataType:'JSON',
            success: function(data){
                loaddingClose();
                if (data.status=='200') {
                    toast('取消成功');
                    window.location.reload();
                }else {
                    toast(data.msg);
                }

            },
            error: function(xhr, type){
                loaddingClose();
                toast('无网络或连接超时，请重试');

            }
        });

    }

</script>

</html>
